<template>
  <div class="app-container">
    <el-container>

      <el-aside width="200px">
        <vue-scroll :ops="ops"
                    style="width: 100%;"
                    :style="{height: height}">
          <group-list />
        </vue-scroll>
      </el-aside>

      <el-container :style="{height: height}">
        <el-main>
          <article-list v-if="model === 'list'" />
          <article-edit v-if="model === 'edit'" />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { updAtcState, } from '@/api/apis'
import GroupList from './group/group-list.vue'
import { mapGetters } from 'vuex'
import ArticleList from './article/article-list.vue'
import ArticleEdit from './article/article-edit.vue'

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger',
      }
      return statusMap[status]
    },
  },
  data() {
    return {
      list: null,
      articles: [],
      topicId: '',
      total: 100,
      topics: [],
      active: '-1',
      height: '600px',
      ops: {
        vuescroll: {},
        scrollPanel: {
          initialScrollY: false,
          initialScrollX: false,
          scrollingX: true,
          scrollingY: true,
          speed: 300,
          easing: undefined,
          verticalNativeBarPos: 'right',
          maxHeight: undefined,
          maxWidth: undefined,
        },
        rail: {
          keepShow: true,
        },
        bar: {
          hoverStyle: true,
          onlyShowBarOnScroll: false, //是否只有滚动的时候才显示滚动条
          background: '#F5F5F5', //滚动条颜色
          opacity: 0.5, //滚动条透明度
          'overflow-x': 'hidden',
        },
      },
    }
  },

  components: {
    GroupList,
    ArticleList,
    ArticleEdit,
  },
  computed: {
    // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
      'model',
      // ...
    ]),
  },
  mounted() {
    this.height = document.documentElement.clientHeight - 100 + 'px'
    window.onresize = () => {
      this.height = document.documentElement.clientHeight - 100 + 'px'
    }
  },
  methods: {
    modAtcState(atcId, atcState) {
      updAtcState({ atcId: atcId, atcState: atcState })
    }
  },
}
</script>
